<template>
  <div class="params">
    <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon />
    <div class="example-block">
      <span class="example-demonstration">选择商品分类：</span>
      <el-cascader placeholder="请选择" v-model="cascader" :options="options" filterable
        :props="{ value: 'cat_id', label: 'cat_name', expandTrigger: 'hover' }" @change="change" />
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="change">
      <el-tab-pane :label="item.title" :name="index" v-for="(item, index) in tabs" :key="index">
        <el-button type="primary" :disabled="paramsId.length < 3 ? true : false" @click="addparams">添加{{ activeTab.title
        }}
        </el-button>
      </el-tab-pane>
    </el-tabs>
    <Table :data="list" :cols="cols" rowKey="attr_id">
      <!-- ------------------------------------- -->
      <template v-slot:expands="{ row }">
        <el-tag class="mx-1" v-for="(item, index) in row.attr_vals" :key="index" closable :disable-transitions="false"
          @close="handleClose(row,index)">
          {{ item }}
        </el-tag>
        <el-input v-if="row.inputVisible" :ref="'inputref'+row.attr_id" v-model="row.inputValue" class="ml-1 w-20" size="small"
          @keyup.enter="handleInputConfirm(row,index)"  />
        <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput(row)">
          + New Tag
        </el-button>
      </template>
      <!-- ---------------------------------------- -->
      <template v-slot:action="{ row }">
        <el-button type="primary" size="small" @click="updatalist(row)">修改</el-button>
        <el-button type="danger" size="small" @click="delList(row)">删除</el-button>
      </template>
    </Table>
    <el-dialog v-model="dialogVisible" width="30%" :title="title + activeTab.title">
      <!-- ------------------------------------------------- -->
      <el-form :model="ruleForm" class="demo-model">
        <el-form-item label="动态参数" prop="attr_name">
          <el-input v-model="ruleForm.attr_name" placeholder="此项必填" />
        </el-form-item>
      </el-form>
      <!-- ------------------------------------------------- -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted, computed,nextTick } from 'vue'
import { categorieslist, getparams, deleteparams, updataparams, addparams, addsmall,deletesmall } from '../../api/goods'
import Table from '../../components/table.vue'
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  setup(props) {
    const data = reactive({
      inputValue: '',
      inputVisible: false,
      ruleForm: [],
      dialogVisible: false,
      list: [],
      //级联选择器
      options: [
        {
          value: "",
          label: "",
          children: [
            {
              value: "",
              label: "",
            }
          ]
        }
      ],
      activeName: "many",
      tabs: {
        many: { title: "动态参数" },
        only: { title: "静态参数" }
      },
      //分类id
      paramsId: [],
      cols: [
        {
          type: "expand",
          slot: "expands"
        },
        {
          title: '',
          type: "index",
          width: 50
        },
        {
          title: '参数名称',
          name: 'attr_name'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      cascader: []
    });
    onMounted(() => {
      getcategorieslist();
    });
    //获取级联选择器列表
    const getcategorieslist = () => {
      categorieslist().then(res => {
        data.options = res.data;
      });
    };
    //标签页级联选择器
    const change = async (value) => {
      // console.log(value);
      data.paramsId = data.cascader.length < 3 ? [] : data.cascader
      console.log(data.cascader);
      const catId = data.paramsId.length < 3 ? undefined : data.paramsId.slice(-1)[0]
      let list= await (getparams(catId, data.activeName));
      console.log(list);
      list.data.forEach(item => {
              item.attr_vals=item.attr_vals.split(' ');
              item.inputVisible=false;
              item.inputValue='';
        });
        data.list=list.data
        console.log(data.list);
    };
    const activeTab = computed(() => {
      console.log(data.activeName);
      return data.tabs[data.activeName];
    });
    const title = computed(() => {
      return data.ruleForm.attr_id ? '修改' : '添加'
    });
    const addparams = () => {
      data.ruleForm = {}
      data.dialogVisible = true
    }
    const updatalist = (row) => {
      data.ruleForm = row
      data.dialogVisible = true
    }
    const delList = (row) => {
      let id = row.attr_id;
      ElMessageBox.confirm("你确定要删除本条数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteparams(id)
          getcategorieslist()
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消",
          });
        });

    }
    const confirm = () => {
      if (data.ruleForm.attr_id) {
        updataparams(data.ruleForm)
        getcategorieslist();
      } else {
        console.log(data.ruleForm);
        addparams(data.ruleForm)
        getcategorieslist();
      }
      data.dialogVisible = false
      console.log(data.ruleForm);
    }
    const handleInputConfirm = (row) => {
      row.inputVisible = false
      console.log(row);
       data.paramsId = data.cascader.length < 3 ? [] : data.cascader
      row.attr_vals=[...row.attr_vals,row.inputValue]
      console.log(row.attr_vals);
      const catId = data.paramsId.length < 3 ? undefined : data.paramsId.slice(-1)[0]
      addsmall(catId,row).then(res=>{
        console.log(res);
      })
      row.inputVisible=false;
      row.inputValue='';
    }
    const inputref=ref()
    const showInput = (row) => {
      row.inputVisible = true
      nextTick(() => {
        console.log(inputref);
        inputref['input' + row.attr_id].focus();
      })

    }
    const handleClose = (row,index) => {
      console.log(index);
      row.attr_vals.splice(index, 1)
      row.attr_vals=row.attr_vals.join(' ')
       data.paramsId = data.cascader.length < 3 ? [] : data.cascader
      const catId = data.paramsId.length < 3 ? undefined : data.paramsId.slice(-1)[0]
      deletesmall(catId,row)
         console.log(row);
    }
    return {
      ...toRefs(data),
      change,
      activeTab,
      updatalist,
      delList,
      title,
      confirm,
      handleInputConfirm,
      showInput,
      handleClose,
      addparams,
      inputref
    };
  },
  components: { Table }
}
</script>
<style lang="scss" scoped>
.params {
  padding: 20px 10px;
  background: #fff;
  box-shadow: 1px 1px 30px rgb(151, 146, 146);

  .w-20 {
    width: 80px;
    display: inline-block;
    margin: 0 5px;
  }

  .example-block {
    margin: 20px 0;
  }
}
</style>
